<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问题反馈 - 应急防护小站</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen text-gray-900">
    <div style="color:teal;">反馈JSP已加载</div>
    <% System.out.println("feedback.jsp loaded"); %>
    
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-4 h-16">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-shield-alt text-green-600 text-2xl"></i>
                <span class="text-xl font-bold">应急防护小站</span>
            </div>
            <div class="flex items-center space-x-2">
                <a href="index.jsp" class="px-4 py-2<%=(request.getRequestURI().endsWith("index.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-house mr-1"></i>首页</a>
                <a href="quiz" class="px-4 py-2<%=(request.getRequestURI().endsWith("quiz.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-question-circle mr-1"></i>答题功能</a>
                <a href="${pageContext.request.contextPath}/books" class="px-4 py-2<%=(request.getRequestURI().endsWith("books.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-cart-shopping mr-1"></i>图书购买</a>
                <a href="user-profile" class="px-4 py-2<%=(request.getRequestURI().endsWith("user-profile.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-user mr-1"></i>个人信息</a>
                <a href="submit-article" class="px-4 py-2<%=(request.getRequestURI().endsWith("submit-article.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-pen-to-square mr-1"></i>我要投稿</a>
                <a href="feedback" class="px-4 py-2<%=(request.getRequestURI().endsWith("feedback.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-comment-dots mr-1"></i>问题反馈</a>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <main class="max-w-4xl mx-auto px-4 py-12">
        <div class="bg-white rounded-2xl shadow-lg p-8">
            <h2 class="text-2xl font-bold mb-8 flex items-center text-teal-700">
                <i class="fa-solid fa-comment-dots text-teal-600 mr-3"></i> 问题反馈
            </h2>
            
            <form method="post" action="feedback" class="space-y-6">
                <!-- 反馈类型 -->
                <div>
                    <label for="type" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fa-solid fa-tags text-teal-600 mr-1"></i>反馈类型
                    </label>
                    <select id="type" name="type" required 
                            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors">
                        <option value="">请选择反馈类型</option>
                        <option value="功能建议">功能建议</option>
                        <option value="内容错误">内容错误</option>
                        <option value="界面问题">界面问题</option>
                        <option value="性能问题">性能问题</option>
                        <option value="其他问题">其他问题</option>
                    </select>
                </div>
                
                <!-- 反馈标题 -->
                <div>
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fa-solid fa-heading text-teal-600 mr-1"></i>反馈标题
                    </label>
                    <input type="text" id="title" name="title" required 
                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
                           placeholder="请输入反馈标题">
                </div>
                
                <!-- 反馈内容 -->
                <div>
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fa-solid fa-file-text text-teal-600 mr-1"></i>反馈内容
                    </label>
                    <textarea id="content" name="content" rows="8" required 
                              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
                              placeholder="请详细描述您遇到的问题或建议"></textarea>
                </div>
                
                <!-- 联系信息 -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fa-solid fa-user text-teal-600 mr-1"></i>姓名
                        </label>
                        <input type="text" id="name" name="name" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
                               placeholder="请输入您的姓名（可选）">
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fa-solid fa-envelope text-teal-600 mr-1"></i>邮箱
                        </label>
                        <input type="email" id="email" name="email" 
                               class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-colors"
                               placeholder="请输入您的邮箱（可选）">
                    </div>
                </div>
                
                <!-- 提交按钮（强制修复） -->
                <div style="text-align:center;margin-top:24px;">
                    <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-8 py-3 rounded-lg font-bold text-lg transition duration-200 flex items-center">
                        <i class="fa-solid fa-paper-plane mr-2"></i> 提交反馈
                    </button>
                </div>
            </form>
            
            <!-- 反馈说明 -->
            <div class="mt-8 bg-teal-50 border border-teal-200 rounded-lg p-6">
                <h3 class="text-lg font-bold text-teal-800 mb-4 flex items-center">
                    <i class="fa-solid fa-info-circle text-teal-600 mr-2"></i>反馈说明
                </h3>
                <ul class="text-teal-700 space-y-2 text-sm">
                    <li class="flex items-start">
                        <i class="fa-solid fa-check text-teal-600 mr-2 mt-1"></i>
                        我们重视每一位用户的反馈，会认真处理每一条建议
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check text-teal-600 mr-2 mt-1"></i>
                        请详细描述问题，包括具体的操作步骤和错误信息
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check text-teal-600 mr-2 mt-1"></i>
                        留下联系方式有助于我们及时回复您的反馈
                    </li>
                    <li class="flex items-start">
                        <i class="fa-solid fa-check text-teal-600 mr-2 mt-1"></i>
                        我们会在3个工作日内回复您的反馈
                    </li>
                </ul>
            </div>
        </div>
    </main>
    
    <!-- 底部信息区 -->
    <footer class="bg-gray-900 text-white py-10 mt-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-shield-alt text-teal-400 text-2xl"></i>
                        <span class="text-xl font-bold">应急防护小站</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">守护生命安全</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">防护分类</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="disaster-earthquake.jsp" class="hover:text-white">地震防护</a></li>
                        <li><a href="disaster-fire.jsp" class="hover:text-white">火灾防护</a></li>
                        <li><a href="disaster-typhoon.jsp" class="hover:text-white">台风防护</a></li>
                        <li><a href="disaster-flood.jsp" class="hover:text-white">洪水防护</a></li>
                        <li><a href="disaster-extremeheat.jsp" class="hover:text-white">极端天气</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#about" class="hover:text-white">关于我们</a></li>
                        <li><a href="submit-article.jsp" class="hover:text-white">我要投稿</a></li>
                        <li><a href="${pageContext.request.contextPath}/books" class="hover:text-white">防护用品</a></li>
                        <li><a href="feedback.jsp" class="hover:text-white">问题反馈</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                    <p class="text-gray-400 text-sm mb-4">订阅我们的防护周刊，获取最新应急资讯</p>
                    <div class="flex">
                        <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-teal-400">
                        <button class="bg-teal-600 hover:bg-teal-700 text-white px-4 rounded-r-lg"><i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 应急防护小站. 保留所有权利.</p>
            </div>
        </div>
    </footer>
</body>
</html> 